<template>
    <div class="" id="userPermission">
       
        <el-row >
            <el-col :span="22" :offset="1">
                <div class="permission-content ">
                  <el-form :inline="true" ref="form" :model="formData" label-width="80px">
                     <el-form-item label="登录账号">
                          <el-input v-model="formData.loginName"></el-input>
                     </el-form-item>
                     <el-form-item label="用户名称">
                          <el-input v-model="formData.userName"></el-input>
                     </el-form-item>
                     <el-form-item label="用户角色">
                      <el-select clearable v-model="formData.role" placeholder="请选择">
                      <el-option
                        v-for="item in basic.selRoles"
                        :key="item.dict_key"
                        :label="item.dict_value"
                        :value="item.id">
                      </el-option>
                    </el-select>
                          <!-- <el-input v-model="formData.role"></el-input> -->
                     </el-form-item>
                     
                     
                      <el-form-item >
                        <el-button v-preventReClick type="primary" @click="queryUser" style="margin-left:100px;">查询</el-button>
                      </el-form-item>
                  </el-form>
                 </div>
            </el-col>
            <el-col :span="22" :offset="1">
                <div class="permission-content bg-purple user-table">
                    <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                     <el-table-column
                     align="center"
                      prop="loginName"
                      label="登录账号">
                      <template slot-scope="scope">
                       
                      <el-button v-preventReClick @click="handleClick(scope.row)" type="text" size="small">{{scope.row.loginName}}</el-button>

                        </template>

                    </el-table-column>
                    <el-table-column
                    align="center"

                      prop="userName"
                      label="用户名称"
                      width="180">
                    </el-table-column>
                    <el-table-column
                    align="center"

                      prop="role"
                      label="用户角色"
                      width="180">
                      <template slot-scope="scope">
                        {{basic&&basic.roles[scope.row.role]}}
                        </template>
                    </el-table-column>
                    <el-table-column
                    align="center"

                      prop="telPhone"
                      label="联系电话"
                      width="180">
                    </el-table-column>
                    <el-table-column
                    align="center"

                      prop="email"
                      label="电子邮箱"
                      width="180">
                    </el-table-column>
                    <el-table-column
                    align="center"

                      prop="address"
                      label="地址">
                    </el-table-column>
                    <el-table-column
                    align="center"

                        fixed="right"
                        label="操作"
                        width="120">
                        <template slot-scope="scope">
                          <el-button v-preventReClick @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                          <el-button v-preventReClick @click="updateClick(scope.row)" type="text" size="small">编辑</el-button>
                          <el-button v-preventReClick @click="delClick(scope.row)" type="text" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                  </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="queryUser" />

                </div>
            </el-col>
        </el-row>
        <el-dialog
          title="用户详情"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
          <div v-if="showUsermessage">
                <el-form  ref="userForm" :model="dialogData" label-width="80px">
                 <el-form-item label="登录账号">
                    {{dialogData.loginName}}
                </el-form-item>
                <el-form-item label="用户名称">
                    {{dialogData.userName}}
                </el-form-item>
                <el-form-item label="用户角色">
                    {{dialogData.role}}
                </el-form-item>
               
                
                <el-form-item >
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button  type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </div>
        <div v-else>
            <el-form  ref="updateForm" :model="dialogData" label-width="80px">
             <el-form-item label="登录账号">
                    {{dialogData.loginName}}
                </el-form-item>
                <el-form-item label="用户名称">
                    <el-input v-model="dialogData.userName"></el-input>
                </el-form-item>
                <el-form-item label="用户角色">
                  <el-select clearable v-model="dialogData.role" placeholder="请选择">
                      <el-option
                        v-for="item in basic.selRoles"
                        :key="item.dict_key"
                        :label="item.dict_value"
                        :value="item.id">
                      </el-option>
                    </el-select>
                    <!-- <el-input v-model="dialogData.role"></el-input> -->

                    <!-- {{userMessage.roles&&userMessage.roles[0]}} -->
                </el-form-item>
               
                
                <el-form-item >
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button v-preventReClick type="primary" @click="submit">保存</el-button>
            </span>
         </div>
        </el-dialog>
        
    </div>
</template>
<script>
// import { defineComponent } from '@vue/composition-api'

import { login, logout, editUserMessage ,delUser,getUserList} from '@/api/userManage'
import {disposeDict} from '@/utils/dicts'
import Pagination from '@/components/Pagination'

export default {
  components: { Pagination },

    data() {
      return{
          text:"测试",
          tableData:[],
          formData:{},
          basic:{
            selRoles:disposeDict('role','arr'),
            roles:disposeDict('role','obj')

          },
          total:0,

         listQuery: {
        page: 1,
        limit: 10,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: '+id'
      },
          userMessage:{},
          showUsermessage:true,
          dialogVisible:false,
          dialogData:{
           
          }
      }  
    },
    created(){
      console.log(this.basic.roles)
     
    },
    mounted(){
    },
    methods:{
      queryUser(){
        this.formData.listQuery=this.listQuery

        getUserList(this.formData).then(res=>{
         this.tableData=res.data.items
        this.total=res.data.total
        console.log(res)
      })
      },
      //查看详情
      handleClick(data){
        this.dialogVisible=true
        this.showUsermessage=true
        this.dialogData=data
      },
      updateClick(data){
        let copy=Object.assign({},data)
        this.dialogData=copy
        this.dialogVisible=true
        this.showUsermessage=false
       
      },
      delClick(data){
        this.$confirm('确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delUser(data).then(res=>{
            this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.queryUser()
          })
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
       
      },
      //关闭弹出框
      handleClose(){
        
        this.dialogVisible = false
      },
      submit(){
        editUserMessage(this.dialogData).then(res=>{

           this.$message({ 
          message: '编辑成功',
          type: 'success'
        });
        this.queryUser()
        this.dialogVisible = false
        })
      }
      
    }
}
</script>
<style lang='scss' scoped>
#userPermission{
    padding: 20px 0;
}
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .permission-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>